<template>
<view class="coupon" :style="'opacity:' + (coupon.restNum===0 || useType || coupon.useStatus && coupon.useStatus!==0 ? '0.5' : '')">
  <view class="coupon__left" :style="'background-color:' + (coupon.useStatus===1 || coupon.useStatus===2 ? '' : leftColor[coupon.couponType]) + ';border:1px solid ' + (coupon.useStatus===1 || coupon.useStatus===2 ? '#D0D0D0' : lineColor[coupon.couponType]) + ';border-right: none;'">
    <view class="coupon__left--cont" :style="'color:' + (coupon.useStatus===1 || coupon.useStatus===2 ? '' : color[coupon.couponType])">
      <view class="coupon__left--cont--discount">
        <span v-if="coupon.couponType===0 || coupon.couponType===2">{{coupon.discount}}</span>
        <span v-else>{{coupon.discountAmount}}</span>
      </view>
      <view class="coupon__left--cont--type">
        {{coupon.couponType===0 || coupon.couponType===2?'折':'元'}}
      </view>
    </view>
    <view class="coupon__left--disType">
      <view v-if="coupon.couponType===0 || coupon.couponType===1" :style="'color:' + (coupon.useStatus===1 || coupon.useStatus===2 ? '' : color[coupon.couponType])">
        无门槛使用
      </view>
      <view v-if="coupon.couponType===2 || coupon.couponType===3" :style="'color:' + (coupon.useStatus===1 || coupon.useStatus===2 ? '' : color[coupon.couponType])">
        满{{coupon.conditionAmount}}可使用
      </view>
    </view>
  </view>
  <view class="coupon__right" :style="{display:'flex',justifyContent:'space-between',backgroundColor:coupon.useStatus===1 || coupon.useStatus===2 ? '' : rightColor[coupon.couponType],border:`1px solid + ${(coupon.useStatus===1 || coupon.useStatus===2 ? '#D0D0D0' : lineColor[coupon.couponType])}`,borderLeft:'none'}" @click="choose" :data-item="coupon">
    <view class="coupon__right--top">
      {{coupon.productType===0?'全店商品':coupon.productType===1?'指定商品可用':'指定商品不可用'}}
      <span>({{coupon.couponType===0 || coupon.couponType===2?'折扣券':'现金券'}})</span>
    </view>
    <view class="coupon__right--bottom">
      <view class="coupon__right--bottom--date" v-if="state==='noUse'">
        <span v-if="coupon.effectiveType === 1">领取后{{coupon.effectiveDays}}天内有效</span>
        <view class="coupon__right--bottom--date" v-else>
          {{effectiveStartTime}}
          <span class="coupon__right--bottom--date--cont">-</span>
          {{effectiveEndTime}}
        </view>
      </view>
      <view class="coupon__right--bottom--date" v-if="state==='use'">
        {{effectiveStartTime}}
        <span class="coupon__right--bottom--date--cont">-</span>
        {{effectiveEndTime}}
      </view>
      <view v-if="state==='car'"></view>
      <view v-if="state==='car'">
        <!-- <span wx:if="{{coupon.canUse}}">立即使用</span> -->
        <!-- <span wx:else>暂不可用</span> -->
        <view v-if="coupon.canUse" style="margin-bottom:40px">
          <m-icon name="iconweigouxuan" v-if="!coupon.isChoose" size="20px" color="#BBB8B9"></m-icon>
          <m-icon name="icongouxuan" color="#F71820" size="20px" v-else></m-icon>
        </view>
        <view v-else>暂不可用</view>
      </view>
      <view class="coupon__right--bottom--button" :style="'background-color:' + (coupon.useStatus===1 || coupon.useStatus===2 ? '' : 'red')" v-else>
        <span v-if="state==='use'">
          <span v-if="coupon.useStatus===0" @click="gotoUse" :data-item="coupon">
            去使用
          </span>
          <span v-if="coupon.useStatus===2">已过期</span>
          <span v-if="coupon.useStatus===1">已使用</span>
        </span>
        <span v-if="state==='noUse'">
          <span v-if="coupon.restNum===0">已领取</span>
          <span v-else @click="myCouponGet">立即领取</span>
        </span>
      </view>
    </view>
  </view>
</view>
</template>
<script lang='ts'>
import { Component, Vue,Watch,Prop } from 'vue-property-decorator'
import DateUtil from "@/mixins/date";
import mIcon from "@/components/m-icon/m-icon.vue"
@Component({
    components:{
        mIcon
    }
})
export default class Coupon extends Vue {
    @Prop()
    coupon:any
    @Prop()
    state:string
    color= ["#ff7800", "#ff0108", "#54bb62", "#00c9e3"]
    leftColor= ["#ffeee5 ", "#ffebec", "#edfff0 ", "#e5fcff"]
    rightColor= ["#fefcfa", "#fff9f9", "#fbfdfc", "#f9fdfd"]
    lineColor= ["#fae0cd", "#fddde1", "#ccfadd", "#cdf0fa"]
    useType= false
    effectiveStartTime= ""
    effectiveEndTime= ""
    @Watch("coupon",{
        immediate:true,
        deep:true,
    })
    couponChange(){
        if (this.coupon) {
        const coupon = this.coupon;
        let effectiveStartTime = this.effectiveStartTime;
        let effectiveEndTime = this.effectiveEndTime;
        if (coupon.startTime) {
            effectiveStartTime = new DateUtil("").getYMDs(coupon.startTime);
            effectiveEndTime = new DateUtil("").getYMDs(coupon.endTime);
        } else {
            effectiveStartTime = new DateUtil("").getYMDs(coupon.createTime);
            effectiveEndTime = new DateUtil("").getAddDays(
            coupon.createTime,
            coupon.effectiveDays,
            );
        }
            this.effectiveStartTime= effectiveStartTime.replace(/-/g, ".")
            this.effectiveEndTime=effectiveEndTime.replace(/-/g, ".")
            this.useType= coupon.hasOwnProperty("canUse") ? !coupon.canUse : false
        }
    }
    /**
     * 去使用优惠券
     */
    gotoUse(e) {
        const item = e.currentTarget.dataset.item;
        this.$emit("gotoUse", { item }, {});
    }

    myCouponGet() {
        this.$emit("myCouponGet", this.$props.coupon, {});
    }

    /**
     * 选择优惠券使用
     */
    choose({
        currentTarget: {
        dataset: { item },
        },
    }) {
        this.$emit("catchchooseCoupon", item, {});
    }
}
</script>
<style lang="scss" scoped>
@include b(coupon) {
    height: 90px;
    background-color: #fff;
    display: flex;
    margin: 5px 14px;
    // box-shadow: 0px 0px 0px #EBEBEB;
    border-radius: 10px;
    width: 346px;

    @include e(left) {
        width: 33%;
        // height: 90px;
        @include flex(center, center);
        flex-wrap: wrap;
        position: relative;
        background-color: #FCEFE6;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;


        @include m(cont) {
            height: 50px;
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            color: red;

            @include m(discount) {
                font-size: 35px;
                display: flex;
                align-items: center;
                font-weight: bold;
                height: 47px;
                justify-content: center;
            }

            @include m(type) {
                margin-left: 2px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        @include m (disType) {
            width: 120px;
            height: 23px;
            border-radius: 50px;
            @include flex(center, center);
            color: red;
            font-size: 12px;
            margin-top: -20px;
        }
    }

    @include e(right) {
        // height: 90px;
        // width: 100%;
        // width: 222px;
        width: 67%;
        // padding-top: 15px;
        display: flex;
        flex-wrap: wrap;
        background-color: #FDFCFA;
        // padding-left: 20px;
        padding: 15px 20px;
        padding-right: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;

        @include m(top) {
            font-size: 14px;
            font-weight: bold;
            color: #2D2D2D;
        }

        @include m(bottom) {
            font-size: 11px;
            color: #595959;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 10px;

            @include m(date) {
                display: flex;

                @include m(cont) {
                    margin: 0px 2px;
                }
            }

            @include m(button) {
                width: 70px;
                height: 25px;
                border-radius: 50px;
                background-color: red;
                @include flex(center, center);
                color: white;
                font-size: 12px;
                margin-left: 10px;
            }

        }
    }
}
</style>